<template>
	<div class="list">
	  	<scroller :lock-x='true'
				  :use-pullup='true'
				  class='scroller'
				  v-ref:scroller
				  @pullup:loading='getList'>
			<div class="articles">
				<div style="height:50px;"></div>
				<article v-for='article in articles'
					 	 v-link='{name:"content",params:{contentId:article.id}}'>
					<p class="articleName">{{ article.name }}</p>
					<img :src="'http://tnfs.tngou.net/image'+article.img" alt="">
				</article>
			</div>
		</scroller>
		<router-view transition='slide'></router-view>
		<loading :show='listLoading'>
	 	
		</loading>
	 </div>
</template>

<script>
	import Scroller from 'vux-com/scroller'
	import Loading from 'vux-com/loading' 

	export default{
		components:{
			Scroller,
			Loading
		},
		data(){
			return{
				
			}
		},
		ready:function(){
				this.resetActiveId(this.$route.params.typeId)
		},
		destroyed:function(){
			this.exit(this.activeId)
		},
		methods:{
			getList:function(){
				this.getListAction(this.activeId,this.page)
			}
		},
		watch:{
			articles:function(){
					this.$nextTick(() => {
			    		this.$refs.scroller.reset()
			    		this.$broadcast('pullup:reset',this.$refs.scroller.uuid)
		    		})
			},
			activeId:function(){
				this.getListAction(this.activeId);
				this.$nextTick(() => {
					//回到顶部
		    		this.$refs.scroller.reset({top:0})
	    		})
			}

		},
		vuex:{
			getters:{
				list:function(state){
					return state.list
				},
				activeId:function(state){
					return state.activeId
				},
				page:function(state){
					return state.activePage
				},
				listLoading:function(state){
					return state.listLoading
				}
			},
			actions:{
				getListAction:function({dispatch},id,page){
					dispatch('DOWNLOAD_LIST',id,page)
				},
				exit:function({dispatch},id){
					dispatch('DELETE_LIST',id)
				},
				resetActiveId:function({dispatch},id){
					dispatch('RESET_ACTIVEID',id)
				}
			}
		},
		computed:{
			articles(){
				return this.list[this.activeId]
			}
		}
	}
</script>

<style scoped lang='scss'>
	.articles{
		font-size:20px;
		width:100%;
		background-color:#ececec;
		padding-bottom:30px;
		article{
			height:100px;
			margin:10px;
			margin-bottom:10px;
			background-color:#ffffff;
			position:relative;
			img{
				height:80px;
				margin:10px;
				right:0;
				position:absolute;
				display:inline-block;
			}
			p.articleName{
				display:inline-block;
				font-size:16px;
				margin-right:120px;
				position:absolute;
				padding:10px;
			}
		}
	}
	.scroller{
		font-size:14px;
		background-color:#ececec;
	}


	.slide-transition {
      transition: all .4s ease;
      overflow: hidden;
      transform:translateX(0px);
    }
    /* .expand-enter 定义进入的开始状态 */
    /* .expand-leave 定义离开的结束状态 */
    .slide-enter, .slide-leave {
      transform: translateX(100%);
    }
</style>